import { useStore } from '@renderer/store/useStore'
import { useState } from 'react'
// import { Form } from 'react-router-dom'
import styles from './index.module.scss'
export default function Settting() {
  // const config = useLoaderData() as ConfigDataType
  // const submit = useSubmit()
  const [keys, setKeys] = useState<string[]>([])
  const config = useStore((store) => store.config)
  const setConfig = useStore((store) => store.setConfig)
  return (
    // <Form>
    <main className={styles.root}>
      <h1>软件配置</h1>
      <section>
        <h5>自定义快捷键</h5>
        <input
          type="text"
          name="shortCut"
          readOnly
          defaultValue={config.shortCut}
          onKeyDown={(e) => {
            if (e.metaKey || e.ctrlKey || e.altKey) {
              const code = e.code.replace(/Left|Right|Key|Digit/, '')
              if (keys.includes(code)) return
              keys.push(code)
              setKeys(keys)
              if (code.match(/^(\w|Space)$/gi)) {
                e.currentTarget.value = keys.join('+')
                setKeys([])
                setConfig({ ...config, shortCut: e.currentTarget.value })
                window.api.shortCut(e.currentTarget.value)
              }
            }
          }}
        />
      </section>
      <section>
        <h5>数据库</h5>
        <input
          type="text"
          name="databaseDirectory"
          readOnly
          defaultValue={config.databaseDirectory}
          onClick={async (e: any) => {
            const path = await window.api.selectDatabaseDirectory()
            console.log(path)
            setConfig({ ...config, databaseDirectory: path })
            e.target.value = path
          }}
        />
      </section>
    </main>
    // </Form>
  )
}
